<template>
  <el-card>
    <el-row type="flex" justify="end" align="center" class="btnButton">
      <el-col style="width: 100px"
        ><el-button @click="showDialog = true" type="primary" plain
          >创建菜单</el-button
        >
      </el-col>
    </el-row>
    <el-table
      :data="list"
      border
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :header-cell-style="{ background: '#fafafa', color: '#646464' }"
    >
      <el-table-column
        label="菜单名称"
        prop="permission_name"
        width="200px"
      ></el-table-column>
      <el-table-column
        label="菜单地址"
        prop="route"
        width="200px"
      ></el-table-column>
      <el-table-column
        label="权限标识"
        prop="permission_mark"
        width="240px"
      ></el-table-column>
      <el-table-column label="图标" prop="icon" width="80px" align="center">
        <!-- <icon-select /> -->
        <template slot-scope="{ row }">
          <svgIcon :iconClass="row.icon" />
        </template>
      </el-table-column>
      <el-table-column label="组件路径" prop="component" width="240px">
      </el-table-column>
      <el-table-column
        label="是否显示"
        prop="hidden"
        align="center"
        width="80px"
      >
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.hidden"
            :inactive-value="2"
            :active-value="1"
            @change="change(row.id, row.hidden)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="创建时间"
        prop="created_at"
        width="200px"
      ></el-table-column>
      <el-table-column label="操作" width="140px;" align="center" fixed="right">
        <template slot-scope="{ row }">
          <el-button
            @click="editHandler(row)"
            circle
            size="mini"
            type="primary"
            icon="el-icon-edit"
          ></el-button>
          <el-button
            @click="zenjia(row.id)"
            circle
            size="mini"
            type="warning"
            icon="el-icon-plus"
          ></el-button>
          <el-button
            @click="delHandler(row.id)"
            circle
            size="mini"
            type="danger"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-if="showDialog"
      title="菜单"
      :visible.sync="showDialog"
      @close="closeHanlder"
    >
      <el-form :rules="formRules" label-width="80px" v-if="isRadio">
        <el-form-item label="菜单类型" prop="anniu">
          <el-radio-group v-model="formData.type" size="small">
            <el-radio-button :label="1" @click.native="changeType = true"
              >菜单</el-radio-button
            >
            <el-radio-button :label="2" @click.native="changeType = false"
              >按钮</el-radio-button
            >
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-form
        v-if="changeType"
        :rules="formRules"
        ref="form"
        :model="formData"
        :inline="true"
        label-width="80px"
      >
        <el-form-item prop="permission_name" label="菜单名称">
          <el-input
            v-model="formData.permission_name"
            placeholder="请输入菜单名称"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="route" label="菜单地址">
          <el-input
            v-model="formData.route"
            placeholder="请输入路由地址，以/开头"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="component" label="组件地址">
          <el-input
            v-model="formData.component"
            placeholder="请输入组件路径地址，不以/开头"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="permission_mark" label="权限标识">
          <el-input
            v-model="formData.permission_mark"
            placeholder="格式：controller@action"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="icon" label="菜单图标">
          <el-input
            v-model="formData.icon"
            placeholder="点击选择图标"
            style="width: 260px"
            :prefix-icon="formData.icon ? '' : 'el-icon-search'"
            @click.native="isIconDialog = !isIconDialog"
          >
          </el-input>
          <svgIcon :iconClass="formData.icon" class="iconClass" />
          <iconSelect
            :isIconDialog="isIconDialog"
            @selected="selected"
            @iconFocus="formData.icon = $event"
          />
        </el-form-item>
        <el-form-item prop="reqirect" label="Reqirect">
          <el-input
            v-model="formData.redirect"
            placeholder="请输入Reqirect"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="islink" label="是否外链">
          <el-radio v-model="formData.islink" :label="1">是</el-radio>
          <el-radio v-model="formData.islink" :label="2">否</el-radio>
        </el-form-item>
        <el-form-item prop="sort" label="排序" label-width="235px">
          <el-input-number
            v-model="formData.sort"
            :min="1"
            :max="1000000000"
            label="排序"
          ></el-input-number>
        </el-form-item>
        <el-form-item prop="hidden" label="Hidden">
          <el-radio v-model="formData.hidden" :label="1">是</el-radio>
          <el-radio v-model="formData.hidden" :label="2">否</el-radio>
        </el-form-item>
        <el-form-item prop="keepalive" label="KeepAlive" label-width="235px">
          <el-radio v-model="formData.keepalive" :label="1">是</el-radio>
          <el-radio v-model="formData.keepalive" :label="2">否</el-radio>
        </el-form-item>
        <el-row type="flex" justify="end">
          <el-button @click="closeHanlder()" size="small">取消</el-button>
          <el-button @click="btnOk" type="primary" size="small">确定</el-button>
        </el-row>
      </el-form>
      <!-- 右边 -->
      <el-form
        :model="formData"
        :rules="formRules"
        v-else
        label-width="80px"
        :inline="true"
      >
        <el-form-item prop="permission_name" label="按钮名称">
          <el-input
            v-model="formData.permission_name"
            placeholder="请输入按钮名称"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="permission_mark" label="权限标识">
          <el-input
            v-model="formData.permission_mark"
            placeholder="格式：controller@action"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="sort" label="排序">
          <el-input-number
            v-model="formData.sort"
            :min="1"
            :max="1000000000"
            label="排序"
          ></el-input-number>
        </el-form-item>
        <el-row type="flex" justify="end">
          <el-button @click="closeHanlder()" size="small">取消</el-button>
          <el-button @click="TjAn" type="primary" size="small">确定</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </el-card>
</template>
<script>
import {
  getMenuInfoApi,
  PostMenuInfoApi,
  UseMenuInfoApi,
  OneMenuInfoApi,
  delMenuInfoApi,
  PutMenuInfoApi,
} from "@/api/permission/permission";
import iconSelect from "@/components/IconSelect/index.vue";
import svgIcon from "@/components/SvgIcon";
export default {
  name: "comMenu",
  components: {
    iconSelect,
    svgIcon,
  },
  data() {
    return {
      changeType: true,
      isRadio: false,
      isIconDialog: false,
      options: [
        {
          value: 0,
          label: "男",
        },
        {
          value: 1,
          label: "女",
        },
      ],
      value: false,
      // num: 1,
      // 1. 定义变量 【列表功能】
      list: [], // 表格数据
      count: 0, // 总数
      // 1. 定义变量 【新增功能】
      formData: {
        component: "", // 组件地址
        icon: "",
        keepalive: 1,
        islink: 2,
        route: "",
        hidden: 1,
        permission_mark: "",
        redirect: "",
        sort: 10,
        permission_name: "",
        parent_id: 0,
        type: 1,
      },
      formRules: {
        route: {
          required: true,
          message: "标识必须！",
          trigger: "blur",
        },
        permission_name: {
          required: true,
          message: "名称必须！",
          trigger: "blur",
        },
        permission_mark: {
          required: true,
          message: "标识必须！",
          trigger: "blur",
        },
        anniu: {
          required: true,
          trigger: "blur",
        },
      },
      showDialog: false,
    };
  },
  created() {
    // 3. 调用方法【列表功能】
    this.initData();
  },
  methods: {
    // 2.定义方法【列表功能】
    async initData() {
      let data = await getMenuInfoApi();
      this.list = data;
    },
    async btnOk() {
      try {
        await this.$refs.form.validate();
      } catch (error) {
        return console.log(error);
      }
      if (this.formData.id) {
        await PutMenuInfoApi(this.formData);
      } else {
        await PostMenuInfoApi(this.formData);
      }
      this.$message.success("操作成功");
      this.showDialog = false;
      this.initData();
    },
    zenjia(id) {
      this.showDialog = true;
      this.isRadio = true;
      this.formData.parent_id = id;
    },
    // 添加按钮
    async TjAn() {
      this.formData.component = "";
      this.formData.keepalive = 1;
      this.formData.islink = 2;
      this.formData.keepalive = 1;
      this.formData.redirect = "";
      this.formData.icon = "";
      this.formData.route = "";
      this.formData.type = 2;
      let res = await PostMenuInfoApi(this.formData);
      this.$message.success("添加成功");
      this.initData();
      this.showDialog = false;
      this.isRadio = false;
    },
    closeHanlder() {
      this.formData = {
        component: "", // 组件地址
        icon: "",
        keepalive: 1,
        islink: 2,
        hidden: 1,
        permission_mark: "",
        redirect: "",
        sort: 10,
        permission_name: "",
        parent_id: 0,
        type: 1,
      };
      this.isRadio = false;
      this.changeType = true;
      this.showDialog = false;
    },
    selected() {
      if (this.formData.icon.length > 0) {
        this.isIconDialog = false;
      }
    },
    // 修改事件
    async editHandler(val) {
      let res = await OneMenuInfoApi({ id: val.id });
      console.log(res);
      this.formData = res;
      this.showDialog = true;
    },
    // 删除逻辑
    async delHandler(id) {
      await this.$confirm("确认删除吗");
      try {
        await delMenuInfoApi({ id: id });
        this.$message.success("删除成功");
      } catch (error) {
        console.log(error);
      }
      this.initData();
    },
    async change(val, id) {
      // console.log(val, id);
      let { msg } = await UseMenuInfoApi({
        id: val,
        hidden: id,
      });
      this.$message.success(msg);
    },
  },
};
</script>
<style lang='scss' scoped>
.btnButton {
  margin-bottom: 20px;
}

.el-form-item__label {
  margin: 0;
}
.iconClass {
  position: absolute;
  right: 318px;
  top: 13px;
}
</style>
